﻿<head>
    <link href="~/css/login.css" rel="stylesheet" type="text/css" />
    <style>
        .fail{
            position:absolute;
            top:0;
            z-index:999;
            height:80px;
            overflow:hidden;
        }
    </style>
</head>


<div class="alert fail" id="liveAlertPlaceholder"></div>
<div class="container">
    <div class="form_box">
        <!-- 注册 -->
        <form class="register_box hidden">
            <h1>register</h1>
            <input type="text" name="PhoneNumber" placeholder="手机号：" id="tel">
            <input type="text" name="UserName" placeholder="用户名：">
            <input type="password" name="Password" id="passwd" placeholder="密码：">

            <button id="zc" type="button" onclick="submitRegistFrom()"  class="liveAlertBtn">注册</button>
        </form>
        <!-- 登录 -->
        <form class="login_box">
            <h1>login</h1>
            <input type="text" name="phoneNumber" autocomplete="off" placeholder="手机号：" id="user">
            <input type="password" name="passwd" autocomplete="new-password" placeholder="密码：" id="upasswd">
            <button type="button" onclick="submitLoginFrom()" id="denglu" class="liveAlertBtn">登录</button>
        </form>
    </div>
    <div class="con_box left">
        <h2>欢迎来到<span>聊天室</span></h2>
        <p>ONLINE <span>CHAT ROOM</span></p>
        <img src="~/image/图片.jpg" alt="" style="border-radius:25px">
        <p>已有账号</p>
        <button id="login">去登陆</button>
    </div>
    <div class="con_box right">
        <h2>欢迎来到<span>聊天室</span></h2>
        <p>ONLINE <span>CHAT ROOM</span></p>
        <img src="~/image/图片.jpg" alt="" style="border-radius:25px">
        <p>没有账号</p>
        <button id="register">去注册</button>
    </div>
</div>


<script>
        let login = document.getElementById('login');
        let register = document.getElementById('register');
        let form_box = document.querySelector('.form_box');
        let register_box = document.querySelector('.register_box');
        let login_box = document.querySelector('.login_box');
        let validateCode = document.querySelector('#validate-code');
        let tel = document.querySelector('#tel');
        let passwd = document.querySelector('#passwd');
        let zc = document.querySelector('#zc');
        let code = document.querySelector("#code")
        let denglu = document.querySelector("#denglu")
        let user = document.querySelector("#user")
        let upasswd = document.querySelector("#upasswd")

        register.addEventListener('click', () => {
            // console.log(form_box);
            form_box.style.transform = 'translateX(80%)';
            login_box.classList.add('hidden');
            register_box.classList.remove('hidden');
        })
        login.addEventListener('click', () => {

            form_box.style.transform = 'translateX(0)';
            login_box.classList.remove('hidden');
            register_box.classList.add('hidden');
        })
       

    function submitLoginFrom() {
        var formData = new FormData(login_box);

        fetch('/api/login', {
            method: 'POST',
            body: formData
        })
            .then(response => response.json())
            .then(data => {
                // 在这里处理返回的JSON数据
                console.log(data);
                if (data.Code !== 200) {
                    Alert('登录失败!','danger')
                    return;
                }
                Alert('登录成功!', 'success')
                localStorage.setItem("token", data.Token);
                window.location.href = "/chat/";
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }

    function submitRegistFrom() {
        var formData = new FormData(register_box);

        fetch('/api/regist', {
            method: 'POST',
            body: formData
        })
            .then(response => response.json() )
            .then(data => {
                // 在这里处理返回的JSON数据
                console.log(data);
                if (data.Code !== 200) {
                    Alert('注册失败!', 'danger')
                    return;
                }
                Alert('注册成功!', 'danger')

            })
            .catch(error => {
                alert("cuowu")
                console.error('Error:', error);
            });
    }
    const alertPlaceholder = document.getElementById('liveAlertPlaceholder')

    const Alert = (message, type) => {
        const wrapper = document.createElement('div')
        wrapper.innerHTML = [
            `<div class="alert alert-${type} alert-dismissible" role="alert">`,
            `   <div style="margin-right:40px;">${message}</div>`,
            '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
            '</div>'
        ].join('')

        alertPlaceholder.append(wrapper)

        setTimeout(() => {
            wrapper.remove()
        },2000)
    }
</script>